<template>
  <Header class="header-editor" @add-soft="addSoft()" />
  <div>
    {{ user }}
    -----------------<br>
    {{u}}
    <el-button @click="test" >++++</el-button>
  </div>
  <!--生成模板-->
  <MessageBox v-model="SoftOptionBox" @on-confirm="onConfirm">
    <div>
      <el-form :model="param" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="param.name" placeholder="名称" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="param.password" placeholder="密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain>生成模板</el-button>
          <el-button type="info" plain @click="onReset(loginForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </MessageBox>
</template>
<script lang="ts">
  import MessageBox from '@/components/MessageBox.vue';
  import { defineAsyncComponent, defineComponent, reactive, toRefs, ref, Ref } from 'vue';
  import axios from 'axios';
  import { ElForm, ElMessage } from 'element-plus/es';
  import * as fs from 'fs';
  import { ElFormItemContext } from 'element-plus/es/tokens';
  import os from 'os';

  type FormInstance = InstanceType<typeof ElForm>;

  export default defineComponent({
    components: {
      Header: defineAsyncComponent(() => import('@/components/Header.vue')),
      MessageBox
    },
    setup() {
      const SoftOptionBox = ref(false);
      let addTipChecked: Ref<boolean> | null = ref(false);
      const loginForm = ref<ElFormItemContext>();

      let user = localStorage.getItem('user'); // 读取缓存里的远端列表，对外可使用的版本。
      let u = ref(user);

      const test = async () => {
        user += "user02";
        u.value = user;
      };
      // 分配工作和使用环境
      let JsonPath = 'C:/Users/' + os.userInfo().username + '/AppData/Roaming/le-cli-game/soft.json';
      let staticPath = '';
      if (process.env.NODE_ENV === 'development') {
        staticPath = 'E:/work/Vue/le-cli-game/client/public';
      } else {
        staticPath = process.execPath.substring(0, process.execPath.lastIndexOf('\\')) + '\\resources\\public';
      }

      const msg = ElMessage;
      const state = reactive({
        param: {
          // 模态框填写
          name: '',
          password: ''
        },
        rules: {
          name: [{ required: true, message: '请选择软件', trigger: 'blur' }],
          password: [{ required: true, message: '请选择版本', trigger: 'blur' }]
        }
      });

      // 打开模态框
      const addSoft = () => {
        SoftOptionBox.value = true; // 模态框提醒
      };

      // 递归
      const delDir = (path: string) => {
        let files = [];
        if (fs.existsSync(path)) {
          files = fs.readdirSync(path);
          files.forEach(file => {
            let curPath = path + '/' + file;
            if (fs.statSync(curPath).isDirectory()) {
              delDir(curPath); // 递归删除文件夹
            } else {
              fs.unlinkSync(curPath); // 删除文件
            }
          });
          fs.rmdirSync(path);
        }
      };

      // 模态框确认
      const onConfirm = async () => {
        msg.success('添加结束！');
      };

      const onReset = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        formEl.resetFields();
      };

      // eslint-disable-next-line @typescript-eslint/no-var-requires
      const { dialog } = require('electron').remote;
      const choosPath = async () => {
        let value = await dialog.showOpenDialog({
          title: '请选择你的保存路径',
          properties: ['openDirectory']
        });
        value.filePaths[0]; // 路径
      };

      return {
        ...toRefs(state),
        SoftOptionBox,
        addTipChecked,
        loginForm,
        addSoft,
        user,
        u,
        test,
        onConfirm,
        onReset,
        choosPath
      };
    }
  });
</script>
<style lang="less" scoped>
  .time {
    font-size: 16px;
    color: #999;
  }

  .btitle {
    background-image: -webkit-linear-gradient(right, #1466ab, #e6d258 25%, #ff7b96 50%, #e6d205 75%, #7b9614);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 4s infinite linear;
    font-size: 16px;
    font-weight: bolder;
    margin-right: 3px;
  }

  .el-dropdown-link {
    font-size: 20px;
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 16px;
  }

  .branchName {
    float: right;
    margin-top: 5px;
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
  }

  .currentVer {
    margin-left: 2px;
    font-size: 16px;
    font-weight: bolder;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    margin-top: 15px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    /*float: left;*/
  }

  button-option {
    padding: 0;
    float: right;
    margin-bottom: 5px;
    margin-left: 15px;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }
  .historyList {
    height: 40%;
    width: 1580px;
    float: left;
    display: flex;
  }
  .moreInfo {
    height: 40%;
    width: 720px;
    margin-left: 20px;
    display: flex;
    float: left;
  }
  .scrollbar-flex-content {
    display: flex;
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-lighter);
    color: var(--el-color-danger);
  }
</style>
